<template>
  <div class="activities-container">
    <Header></Header>
    <h2 :class="{ active: currentSection === 'activities' }" @click="setActiveSection('activities')"></h2>
    <ul>
      <li v-for="activity in activities" :key="activity.id">
        <h3>{{ activity.title }}</h3>
        <p>{{ activity.description }}</p>
        <router-link :to="`/activity/${activity.id}`">查看详情</router-link>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';

import Header from './Header.vue';
const currentSection = ref('activities');
const router = useRouter();
const activities = ref([
  {id:1,title:'湖州奥体中心演唱会志愿者',description:'快来快来，湖州要开演唱会了'}
]); // 存储活动列表

const setActiveSection = (section) => {
  currentSection.value = section;
};

onMounted(() => {
  currentSection.value = router.currentRoute.value.name.toLowerCase(); 
});
</script>

<style scoped>
.activities-container {
  padding: 20px;
  background-color: #f9f9f9;
  /* border: 1px solid #ccc; */
  border-radius: 5px;
}

.activities-container h2 {
  margin-bottom: 20px;
}

.activities-container h2.active {
  color: blue; /* Change text color to blue when active */
}

.activities-container ul {
  list-style-type: none; /* 移除列表样式 */
  padding: 0; /* 移除内边距 */
}

.activities-container li {
  margin-bottom: 20px; /* 每个活动项之间的间距 */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style> 